<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购买</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/s_base.css" />
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/mall.css" />
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/iconfont/iconfont.css" />
	</head>

	<body style="background: #fff;">
		<img src="__ROOT__/public/webapp/img/main_img@2x.png" class="showimg" />
		<div class="color_wrap clearfix">
			<p class="left">饰面颜色</p>
			<div class="color right clearfix">
				<span>枪灰色</span>
				<span>红古铜</span>
				<span class="cur_color">樱桃红</span>
				<span>朱古力黑</span>
				<span>香槟金</span>
			</div>
		</div>
		<!--表单-->
		<form action="" method="post" id="pfrom">
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-dizhi"></i>
					<span class="theme_text">收货地址</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="text" name="dizhi" id="dizhi" value="" placeholder="请输入收货地址" />
				</div>
			</div>
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-dianhua"></i>
					<span class="theme_text">收货电话</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="number" name="phone" id="phone" value="" placeholder="请输入收货电话" />
				</div>
			</div>
			<input type="button" value="确认" class="confirm" />
		</form>
		<div class="mask"></div>
		<div class="pay_wrap">
			<img src="__ROOT__/public/webapp/img/fukuan.jpg" class="code_img" />
			<p>长按识别，向客服转账支付</p>
			<p>支付成功后，客服会在两天内发货</p>
		</div>
	</body>
	<script src="__ROOT__/public/webapp/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('.color span').on('click', function() {
			$(this).siblings().removeClass('cur_color');
			$(this).addClass('cur_color');
			console.log($(this).index());
		});
		$('.confirm').on('click', function() {
			pajax(pjson());
			return false;
		});
		$('.mask').on('click', function() {
			$('.mask').hide();
			$('.pay_wrap').hide();
		});
		var pajax = function(json) {
			if($('#dizhi').val().length < 2) {
				alert('请输入收货地址!');
				return false;
			}
			if($('#phone').val().length < 11) {
				alert('请输入收货电话!');
				return false;
			}
			if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($('#phone').val()))) {
				alert('请输入正确的手机号!');
				return false;
			}

			$.ajax({
				type: "post",
				url: document.URL,
				//      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
				data: json,
				dataType: "json",
				success: function(data, textStatus, jqXHR) {
					if(data == "success") {
						$('.mask').show();
						$('.pay_wrap').show();
					}

				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					alert("请求失败！");
				}
			});
		}
		var pjson = function() {

			var x = $("#pfrom").serializeArray();
			var json = {};
			$.each(x, function(i, field) {
				json[field.name] = field.value;
			});
			json["color"] = $(".cur_color").text();
			console.log(json);
			return json;
		}
	</script>

</html>